Si deux valeurs de display semblent aujourd'hui bien ancrées dans les mœurs des intégrateurs web, ce sont incontestablement inline et block. La valeur hybride inline-block, pourtant diablement efficace, s'illustre quant à elle par une discrétion notoire.
Les éléments nativement en ligne tels que a ou strong — ou dont l'affichage inline a été explicitement spécifié — présentent ce caractère bien souvent recherché de positionnement en succession côte à côte. Ils cantonnent cependant l'élément à occuper, par la même occasion, la place que demande son contenu, conséquence rarement recherchée — par exemple, dans la mise en place d'une grille de mise en page.
La valeur inline-block intervient brillamment à ce niveau-là en permettant de bénéficier à la fois de l'élément en tant que bloc — et par la même occasion de pouvoir spécifier une taille — ainsi qu'en tant qu'élément en ligne au niveau de la gestion des placements.
Ce comportement hétéroclite adopte par la même occasion une gestion singulière des alignements verticaux caractérisée par:
-
un déploiement par défaut du contenu depuis un socle inférieur commun déterminé par l'élément
inline-blockle plus fourni en contenu ou, de manière plus générale, dont la hauteur dépasse les objetsinline-blockadjacents -
l'usage différent de la propriété
vertical-alignqui agit non plus sur le contenu de la boîte — comme c'est le cas pour les cellules d'une table — mais sur la boîte elle-même
Le positionnement d'éléments en inline-block s'apparente donc, nous l'avons vu, au placement des images sur une ligne de texte. En intégrant ce principe de positionnement, il devient aisé de réaliser des architectures de blocs jusqu'alors difficilement concevables, telles que celle-ci:
Imaginons qu'il s'agisse d'une discussion autour de dictons célèbres. Des paragraphes viendraient introduire la citation (trois en l'occurrence), suivis d'autant de paragraphes que nécessaires à l'analyse de ce dernier, le tout centré horizontalement. Nous partirons logiquement sur un marquage HTML simple, de type:
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<blockquote>
<p>Citation centrale</p>
</blockquote>
<p>Paragraphe 4</p>
<p>Paragraphe 5</p>
<p>Paragraphe 6</p>
<p>Paragraphe 7</p>
<p>Paragraphe 8</p>
</body>
La mise en forme, grâce à l'inline-block, se réalisera quant à elle en un tour mains:
body {
padding:1.5em 0;
text-align:center;
}
body > p {
display:inline-block;
text-align:left;
width:100px;
padding:10px;
background:#eee;
}
p+p {
margin-left:5px;
}
blockquote {
background:#333;
color:#fff;
padding:10px;
margin:8px 0;
}
blockquote ~ p {
vertical-align:top;
background:#bbb;
}
Les paragraphes étant maintenant considérés comme des éléments en ligne du point de vue des positionnements, un alignement horizontal traditionnel sur notre élément conteneur body suffira à centrer l'ensemble automatiquement. Le sélecteur d'enfants directs (chevron ">", non implémenté par Internet Explorer 6) évite de sélectionner par mégarde un paragraphe se trouvant hors du champ d'application ciblé, tel que celui se trouvant au sein du bloc de citation. Le sélecteur CSS3 général d'adjacence ("~", non supporté par IE6) permet finalement de redéfinir aisément la règle d'alignement de départ pour tous les paragraphes succédant à notre citation.
Le lecteur attentif aura peut-être remarqué une incohérence dans les tailles des marges attribuées. En effet, l'élément blockquote bénéficie de marges verticales plus importantes que les marges de gauche destinées à séparer les différents paragraphes. Pourtant, les zones blanches entre nos différents blocs semblent visuellement identiques. Effet d'optique? Bien au contraire. Afin de comprendre ce phénomène, commençons par analyser un agrandissement de la marge séparant deux paragraphes:
Étonnamment, nous observons une zone large de huit pixels malgré l'instruction de cinq pixels donnée. Que s'est-il passé? La raison est simple, et parfaitement logique: nos paragraphes étant considérés comme des éléments "normaux" au niveau de leur état dans le flux, ils répondent dès lors aux lois habituelles de cette catégorie et sont sensibles aux espaces blancs indiqués dans notre code HTML par les différents retours à la ligne (voir le post Impact sur le rendu de la mise en forme du code HTML à ce sujet). En juxtaposant nos différentes balises sans espaces, nous supprimons logiquement ces écarts:
<p>Paragraphe 1</p><p>Paragraphe 2</p><p>Paragraphe 3</p>
Si la lisibilité de notre document source pâtit cruellement de ce manque d'aération rendant pénible toute relecture ou maintenance future, nous pourrons recourir à divers artifices relevant, il faut le dire, plus de la bidouille qu'autre chose, mais améliorant sensiblement la clarté du marquage. Parmi ces solutions, citons le recours possible aux commentaires:
<p>Paragraphe 1</p><!--
--><p>Paragraphe 2</p><!--
--><p>Paragraphe 3</p>
Nous pouvons également écrire notre marquage par le biais d'un langage dynamique, tel que PHP, afin d'éviter ces espaces indésirables:
<?php
echo '<p>Paragraphe 1</p>';
echo '<p>Paragraphe 2</p>';
echo '<p>Paragraphe 3</p>';
?>
En termes d'implémentations, la valeur inline-block est celle qui s'en sort le mieux, bien qu'elle nécessite toutefois un léger correctif pour pouvoir fonctionner sur Internet Explorer (voir la conclusion pour plus de détails).